<!--
 * @Description:查询经销商列表
 * @Autor: 刘诗文
 * @Date: 2020-12-10 09:41:52
 * @LastEditors: 刘诗文
 * @LastEditTime: 2020-12-10 16:56:15
-->
<template>
  <div>
    <TopFilter :list="topFilterList" :cols="2" :labelWidth="105" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      height="500"
      selectionType="single"
      :columns="columns"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :datakey="'records'"
      columnsRef="searchDearlerListlsw"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="onRowSelectChange"
    >
    </FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <AjaxButton type="primary" :click="saveHandler">添 加</AjaxButton>
      <el-button @click="cancelHandle">关 闭</el-button>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { notifyAction } from '@/utils';
import { getDearlerList, getOrgList } from '@/api/customerRepair/vehicleOwnerManagement/vehicleChange';
import { getProvince, getCitys, getDistrict, getRegion } from '@/api/customerRepair/customerInfo/ownerVehicleManagement';

export default {
  name: 'searchDearlerListlsw',
  mixins: [dictionary],
  data() {
    this.selectedData = null;
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      fetchapi: getDearlerList,
      fetchParams: { pageNum: 1 },
      regionList: [],
      orgList: []
    };
  },
  created() {
    this.getProvine();
  },
  mounted() {
    this.BaseTable = this.$refs.table;
    // 获取事业部下拉框
    this.getOrgList();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'dealerCode'
        },
        {
          type: 'INPUT',
          label: '经销商名称',
          fieldName: 'dealerName'
        },
        {
          type: 'SELECT',
          label: '事业部',
          fieldName: 'deptId',
          itemList: []
        },
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '公司全称',
          dataIndex: 'dealerName'
        },
        {
          title: '经销商代码',
          dataIndex: 'dealerCode'
        },
        {
          title: '经销商简称',
          dataIndex: 'dealerShortname'
        },
        {
          title: '经销商类型',
          dataIndex: 'dealerType',
          render: props => {
            return <span>{this.createDictText(props.row.dealerType, 2538)}</span>;
          }
        },
        {
          title: '经销商级别',
          dataIndex: 'shopLevel',
          render: props => {
            return <span>{this.createDictText(props.row.shopLevel, 2540)}</span>;
          }
        },
        {
          title: '事业部',
          dataIndex: 'deptId',
          render: props => {
            return <span>{this.getText('org', props.row.deptId)}</span>;
          }
        },
        {
          title: '省粉',
          dataIndex: 'provinceId',
          render: props => {
            return <span>{this.getText('region', props.row.provinceId)}</span>;
          }
        },
        {
          title: '城市',
          dataIndex: 'cityId',
          render: props => {
            return <span>{this.getText('region', props.row.cityId)}</span>;
          }
        },
        {
          title: '区县',
          dataIndex: 'districtId',
          render: props => {
            return <span>{this.getText('region', props.row.districtId)}</span>;
          }
        }
      ];
    },
    changeHandle(val) {
      console.log(val);
      console.log('搜索');
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(this.BaseTable.EXECUTE_RESET_HEIGHT);
    },
    onRowSelectChange(row) {
      if (!row.length) {
        this.selectedData = null;
      } else {
        this.selectedData = row[0];
      }
    },
    async saveHandler() {
      if (!this.selectedData) {
        notifyAction('请选择一条记录', 'warning');
      } else {
        this.$emit('dealerData', this.selectedData);
      }
    },
    // 取消
    cancelHandle() {
      this.$emit('close', false);
    },
    // 获取事业部下拉框
    async getOrgList() {
      const res = await getOrgList();
      if (res.resultCode === 200) {
        if (res.errMsg) {
          notifyAction(res.errMsg, 'warning');
        } else {
          this.topFilterList.find(item => item.fieldName === 'deptId').itemList = this.orgList = res.data.map(x => ({
            value: x.orgId,
            text: x.orgName
          }));
        }
      }
    },
    async getProvine() {
      const allRegion = await getRegion();
      this.regionList = allRegion.data.map(x => ({ value: x.regionId, text: x.regionName }));
    },
    getText(type, val) {
      if (type === 'region') {
        return this.regionList.find(x => x.value === val) ? this.regionList.find(x => x.value === val).text : '';
      } else if (type === 'org') {
        return this.orgList.find(x => x.value === val) ? this.orgList.find(x => x.value === val).text : '';
      }
    }
  }
};
</script>
<style lang="less" scoped></style>
